<template>
  <div title="看不清楚？点击换一张"
       class="verifyCode h-40px px-10px box-border rounded cursor-pointer basis-10 center~">
    <div class="m-2px" v-for="(item, index) of code"
         :key="index">
      {{ item }}
    </div>
    <div class="line h-2px w-5/7 bg-dark-50"></div>
  </div>
</template>

<script setup lang="ts">
import {toRefs} from "vue"

interface Props {
  code: string[]
}

const rawProps = defineProps<Props>()
const {code} = toRefs(rawProps)
</script>

<style scoped>
.verifyCode {
  border: 1px solid var(--gray);
  position: relative;
}

.line {
  position: absolute;
  top: 45%;
  transform: rotate(5deg);
}
</style>